import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import '../components/CategoryTitle.dart';
import '../components/PageWrap.dart';

class ConstrainedLn extends StatefulWidget {
  const ConstrainedLn({super.key});

  @override
  State<ConstrainedLn> createState() => _ConstrainedLnState();
}

class _ConstrainedLnState extends State<ConstrainedLn> {
  Widget redBox = DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            "布局原理与约束", // 设置标题文本
            style: TextStyle(
              color: Colors.white, // 设置标题字体颜色
            ),
          ),
          iconTheme: IconThemeData(
            color: Colors.white, // 设置返回图标颜色
          ),
          backgroundColor: Colors.deepPurple, // 设置AppBar背景颜色
        ),
        body: ListView(
          shrinkWrap: true,
          padding: const EdgeInsets.all(20.0),
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CategoryTitle(text: "ConstrainedBox"),
                ConstrainedBox(
                  constraints: BoxConstraints(
                      minWidth: double.infinity, //宽度尽可能大
                      minHeight: 50.0 //最小高度为50像素
                      ),
                  child: Container(
                    height: 5.0,
                    child: redBox,
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                CategoryTitle(text: "SizedBox"),
                SizedBox(width: 80.0, height: 80.0, child: redBox),
                SizedBox(
                  height: 20.0,
                ),
                CategoryTitle(text: "多重限制"),
                ConstrainedBox(
                  constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0),
                  //父
                  child: ConstrainedBox(
                    constraints:
                        BoxConstraints(minWidth: 90.0, minHeight: 20.0), //子
                    child: redBox,
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                CategoryTitle(text: "UnconstrainedBox"),
                ConstrainedBox(
                    constraints:
                        BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
                    child: UnconstrainedBox(
                      //“去除”父级限制
                      child: ConstrainedBox(
                        constraints:
                            BoxConstraints(minWidth: 90.0, minHeight: 20.0), //子
                        child: redBox,
                      ),
                    ))
              ],
            )
          ],
        ));
  }
}
